<script setup lang="ts">
import TileItem from '@/components/tiles/item/TileItem.vue'

const props = defineProps({
    transformStyle: {type: String, required: false}
}) 
let baseTransformStyle = "rotateX(210deg) rotateZ(180deg) translateZ(26px) translateX(-20px)";
</script>

<template>
  <div class="opposite-an-gang-group" :style="{'transform': props.transformStyle}">
    <TileItem :transformStyle="baseTransformStyle" :scale="0.7"></TileItem>
    <TileItem :transformStyle="baseTransformStyle" :scale="0.7"></TileItem>
    <TileItem :transformStyle="baseTransformStyle" :scale="0.7"></TileItem>
    <TileItem :transformStyle="baseTransformStyle" :scale="0.7"></TileItem>
  </div>
</template>

<style scoped lang="scss">
.opposite-an-gang-group {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  div:not(:first-child) {
    margin-left: 0.5px;
  }
}
</style>
